/**
 * jQuery plugin. Create group of text input, elSelect and elColorPicker.
 * Allow input border-width, border-style and border-color. Used in elRTE
 *
 * @author:    Dmitry Levashov (dio) dio@std42.ru
 **/

;(function($){

  $.widget("el.borderSelect", {
    options: {
      "name"       : "el-borderselect",
      "class"      : "el-borderselect",
      "value"      : {},
      "styleHeight": 0,
      "change"     : null
    },
    _create: function()
             {
               var self = $.extend(this, {
                 width: $("<input />", {type: "text", name: [this.options.name, "[width]"].join(""), size: 3, style: "text-align:right;"}).
                          change(function(){self.change();}),
                 color: $("<div />", {style: "position:relative;"}).colorPicker({
                          "class"          : "el-colorpicker ui-icon ui-icon-pencil",
                          "name"           : [this.options.name, "[color]"].join(""),
                          "palettePosition": "outer",
                          "change"         : function(){self.change();}
                        }),
                 style: $("<div />").elSelect({
                          tpl      : "<div style='border-bottom:4px %val #000;width:100%;margin:7px 0' />",
                          tpls     : {"": "%label"},
                          maxHeight: this.options.styleHeight,
                          select   : function(){self.change();},
                          src      : {
                            ""      : "none",
                            "solid" : "solid",
                            "dashed": "dashed",
                            "dotted": "dotted",
                            "double": "double",
                            "groove": "groove",
                            "ridge" : "ridge",
                            "inset" : "inset",
                            "outset": "outset"
                          }
                        })
               });
               this.element.empty().addClass(this.options["class"]).attr("name", this.options.name).append(
                 $("<table />", {cellspacing: 0}).append(
                   $("<tr />").
                     append($("<td />", {html: " px"}).prepend(this.width)).
                     append($("<td />").append(this.style)).
                     append($("<td />").append(this.color))
                 )
               );
               this.val(this.options.value);
             },
    change : function(){if($.isFunction(this.options.change))this.options.change(this.val());},
    val    : function(v)
             {
               var w;
               if (v == null)
               {
                 w = parseInt(width.val());
                 return {width: isNaN(w) ? "" : [w, "px"].join(""), style: this.style.elSelect("val"), color: this.color.val()};
               }
               var s, c;
               if (v.nodeName || v.css)
               {
                 if (!v.css)
                   v = $(v);
                 var b = v.css("border");
                 if (b)
                   w = s = c = b;
                 else
                 {
                   w = v.css("border-width");
                   s = v.css("border-style");
                   c = v.css("border-color");
                 }
               }
               else
               {
                 w = v.width || "";
                 s = v.style || "";
                 c = v.color || "";
               }
               this.width.val($.el.utils.toPixels(w));
               this.style.elSelect("val", s ? s.match(/(solid|dashed|dotted|double|groove|ridge|inset|outset)/i)[1] : "");
               this.color.val($.el.borderSelect.rgb2hex(c));
               return this.element;
             }
  });

  $.extend($.el.borderSelect, {
    hex    : function(x)
             {
               var hexDigits = ["0", "1", "2", "3", "4", "5", "6", "7", "8","9", "a", "b", "c", "d", "e", "f"];
               return x ? hexDigits[(x - x % 16) / 16] + hexDigits[x % 16] : "00";
             },
    rgb2hex: function(str)
             {
               var rgb = (str || "").match(/\(([0-9]{1,3}),\s*([0-9]{1,3}),\s*([0-9]{1,3})\)/);
               return rgb ? ["#", this.hex(rgb[1]), this.hex(rgb[2]), this.hex(rgb[3])].join("") : "";
             }
  });

})(jQuery);
